D26 client 從遊戲房間到遊戲開始 (包含串接連線)

2023 iThome 鐵人賽

DAY 26

自我挑戰組

chatGPT 帶你從零開始寫 websocket 連線遊戲系列第 26 篇

15th鐵人賽 websocket遊戲

sixwings

2023-09-26 23:56:54

229 瀏覽

分享至

今天的進度是將前面幾天的內容總結集來，複雜度相對高很多。文章主要說明前後端互動有調整的地方，並且附上一部分的實作。

前後端互動調整

前端主要是依靠 sendMessage() 發送所有訊息到後端，內容格式為 { action, payload }
回傳格式為 { message } 或 { error }
message 是呼叫 API 的成功訊息，error 則是呼叫 API 的失敗訊息

因為開房間進入遊戲之後，覺得這一類訊息應該要另外處理，所以前端接收到的資訊又多了 gameEvent 和 gameData。

以下是遊戲相關的通知事件：

更新遊戲狀態 { gameEvent: 'setState', gameData }
玩家回合開始 { gameEvent: 'turnStart' }
此時前端切換為可行動狀態
玩家等待對手行動 { gameEvent: 'waitOther' }
此時前端切換為不可行動狀態

因為這部分涉及一些前端畫面樣式變動的部分，所以會在明天才做細部優化

部分實作

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <title>簡易網頁遊戲</title>
</head>
<body>
  <div class="game-container">
    <div class="player-info">
      <h2>對手資訊</h2>
      <p>對手血量: <span id="opponent-health"></span></p>
    </div>
    <div class="player-info">
      <h2>玩家資訊</h2>
      <p>玩家血量: <span id="player-health"></span></p>
      <p>玩家手牌: <span id="player-hand"></span></p>
    </div>
    <div class="commands">
      <button onclick="createRoom()">開房</button>
      <button onclick="joinRoom()">進房</button>
      <button onclick="startGame()">開局</button>
      <button onclick="playerDrawCard()" id="draw-card-button">抽牌</button>
      <button onclick="playerPlayCard()" id="play-card-button">出牌</button>
      <button onclick="updateGameInfo(gameData1)">模擬開始</button>
      <button onclick="updateGameInfo(gameData2)">模擬抽牌</button>
      <button onclick="updateGameInfo(gameData3)">模擬出牌</button>
    </div>
  </div>
  <div class="chat-container">
    <h2>聊天</h2>
    <div id="messages" class="chat-messages">
      <!-- 聊天訊息會在這裡顯示 -->
    </div>
    <div class="chat-input">
      <input type="text" id="message-input" placeholder="輸入訊息...">
      <button id="send-button">送出</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

完整實作部分請參考這裡，目前可以基本功能都可以動，只是很多邊界條件沒有擋，後續需要再補起來。因為內容已經多到放這邊會非常占版面的程度，沒辦法放全部還請大家包涵。明天預計針對前端頁面的一些轉場、玩家可否行動的按鈕做些微調。